<style>
	#upload_owner_frame .upload-file {
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background:#e9e9e9;
	}
	#upload_owner_frame .file-frame {
		position:absolute;
		width:90%;
		height:128px;
		top:20px;
		left:50%;
		margin-left:-45%;
		background:#0dc8ff;
		border-radius:4px;
		color:#fff;
		font-size:16px;
		box-shadow:0px -5px 35px #a4daff;
		text-align:center;
	}
	#upload_owner_frame .upload-log {
		position:absolute;
		top:140px;
		left:0;
		right:0;
		bottom:0;
		background:#fff;
	}
	#upload_owner_frame #upload-file-button {
		position:absolute;
		left:50%;
		margin-left:-45px;
		bottom:15px;
		width:90px;
		color:#ffffff;
		padding:5px 0px;
		text-align:center;
		background:transparent;
		border:2px solid #ffffff;
		border-radius:3px;
		outline:none;
		transition:all ease .2s;
	}
	#upload_owner_frame #upload-file-button:hover {
		color:#000000;
		background:#ffffff;
	}
	#upload_owner_frame #upload-file-button:active {
		box-shadow:2px 2px 10px #ccc inset;
	}
	#upload_owner_frame .upload-log {
		position:relative;
		padding-top:40px;
		text-align:left;
	}
	#upload_owner_frame .upload-log:after {
		position: absolute;
		top:15px;
		width: 40px;
		height: 5px;
		background: #e9e9e9;
		content: ' ';
		left:50%;
		margin-left:-20px;
		border-radius:10px;
	}
	#upload_owner_frame .upload-log > label {
		margin:0 20px;
	}
	#upload_owner_frame .upload-log-table {
		width:100%;
		height:320px;
		overflow-y: auto;
		margin-top:10px;
		border-top:1px solid #eee;
		border-bottom:1px solid #eee;
	}
	#upload_owner_frame .res-success {
		position:relative;
		color:lightseagreen;
	}
	#upload_owner_frame .res-success:before {
		position:absolute;
		top:6px;
		left:-15px;
		content:' ';
		width:10px;
		height:10px;
		border-radius:10px;
		background:lightseagreen;
	}
	#upload_owner_frame .res-false {
		position:relative;
		color:#e26b1d;
	}
	#upload_owner_frame .res-false:before {
		position:absolute;
		top:6px;
		left:-15px;
		content:' ';
		width:10px;
		height:10px;
		border-radius:10px;
		background:#e26b1d;
	}
	#upload_owner_frame #file-address {
		margin-top:15px;
		font-size:16px;
		font-family:'microsoft yahei';
		font-weight:normal;
		color: #ffffff !important;
	}
	#upload_owner_frame #upload-pro {
		position:absolute;
		left:50%;
		margin-left:-45px;
		border:none;
		bottom:15px;
		width:94px;
		height:19px;
		background:transparent;
		padding:5px 0px;
		text-align:center;
		border-radius:3px;
		outline:none;
	}
	#upload_owner_frame #upload-pro-ed {
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		width:0%;
		transition:all ease .2s;
		background:#21aaff;
		border-radius: 3px;
	}
	#upload_owner_frame .change-upload-pro {
		background:#ffffff;
		animation:changeUploadPro 1s ease forwards;
	}
	@keyframes changeUploadPro {
		0% {height:19px;width:94px;margin-left:-45px;background:#fff;}
		30% {height:4px;padding:0;width:94px;margin-left:-45px;background:#fff;}
		90% {height:4px;width:98%;margin-left:-49%;padding:0;background:#fff;}
		100% {height:4px;width:90%;margin-left:-45%;padding:0;background:#fff;}
	}
	.change-upload-pro-go {
		background:#fff;
		animation:changeUploadProGo 1s ease forwards;
	}
	@keyframes changeUploadProGo {
		0% {height:4px;width:90%;margin-left:-45%;padding:0;background:#fff;}
		10% {height:4px;width:98%;margin-left:-49%;padding:0;background:#fff;}
		70% {height:4px;padding:0;width:94px;margin-left:-45px;background:#fff;}
		85% {height:12px;width:94px;margin-left:-45px;background:rgba(255, 255, 255, .5);}
		120% {height:19px;width:94px;margin-left:-45px;background:transparent;}
	}
	#upload_owner_frame .upload-pro-ed-notify {
		position:absolute;
		right:-25px;
		height:24px;
		min-width:50px;
		bottom:10px;
		color:#000;
		font-size:12px;
		border-radius:3px;
		background:url('images/pro-ed-notify.png') center no-repeat;
		background-size:cover;
		display:none;
	}
	#upload_owner_frame table {
		border:none;
		width:100%;
	}
	#upload_owner_frame table tr {
		border-bottom:1px solid #e9e9e9;
		height: 30px;
	}
	#upload_owner_frame .choice-permission, #upload_owner_frame .choice-vehicle {
		margin-left: 20px;
		margin-bottom:10px;
	}
</style>

<article id="upload_owner_frame">
	<div class="upload-file">
		<form enctype="multipart/form-data">
			<div class="file-frame">
				<h1 id="file-address">请选择文件</h1>
				<input type="file" name="upload-file" style="display:none" />
				<div id="upload-pro">
					<div id="upload-pro-ed"><div class="upload-pro-ed-notify">0%</div></div>
				</div>
				<button type="button" id="upload-file-button">上传</button>
			</div>
			<div class="upload-log">
				<div class="choice-vehicle">
					<label>车辆类型：</label>
					<select name="vehicleType" id="vehicle-type"></select>
				</div>
				<div class="choice-permission" style="margin-bottom: 10px;">
					<label>请选择默认权限：</label>
					<select name="permissionCode" id="permissionCode">
						<option value="-1">暂无</option>
					</select>
				</div>
				<div class="choice-permission" style="margin-bottom: 10px;">
					<label>请选择所属分区：</label>
					<div class="potion-code lonix downlist" style="display: inline-block">
						<input type="hidden" name="partitionCode" id="upload-partition-code">
						<span class="title" data-value="-1" style="border:1px solid #aaaaaa;padding:1px 5px;">暂无分区</span>
						<div class="lonix float-frame float potion-tree">
							<div class="lonix float-header">
								<input type="text" class="lonix search-input" maxlength="15" placeholder="搜索" />
							</div>
							<div class="lonix float-body">
								<ul class="ztree" id="ztree-upload-partition"></ul>
							</div>
							<div class="lonix float-prompt"></div>
							<div class="lonix float-footer">
								<div class="lonix button-group">
									<button type="button" class="lonix button primary">确认</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="upload-log-table">
					<textarea readonly="readonly" style="width: 95%;height: 92%;resize: none;border: none;padding: 10px; resize: none; border:none;"></textarea>
				</div>
			</div>
		</form>
	</div>
</article>
<script>
	JsonpAjax(baseApiPath + 'access_permission/list/choice', '', 'json', function(res) {
		if (undefined != res && res.length > 0) {
			$('#upload_owner_frame #permissionCode').html();
			for (var i = 0; i < res.length; i++) {
				$('#upload_owner_frame #permissionCode').append('<option value="'+res[i].id+'">'+res[i].accessName+'</option>');
			}
		}
	});
	// 查询所有分区
	JsonpAjax(baseApiPath + 'parking_space/potion/all', '', 'json', function(res) {
		var potionTree = $('#upload_owner_frame').find('.potion-tree').lonixFloat({
			source: res,
			setting: {
				view: {
					showLine: true,
					selectedMulti: false,
					dblClickExpand: false,
					showIcon: false
				},
				data : {
					simpleData: {
						enable: true,
						idKey: "code",
						pIdKey: "pid",
						rootPId:""
					}
				}
			},
			searchField: 'name',
			target: $('#upload_owner_frame').find('.potion-code .title'),
			primary: function (nodes) {
				var node = nodes[0];
				$('#upload_owner_frame').find('.potion-code .title').html(node.name);
				$('#upload_owner_frame').find('.potion-code .title').attr('data-value', node.code);
				$('#upload_owner_frame').find('#upload-partition-code').val(node.code);
				$('#upload_owner_frame').find('.potion-tree').fadeUp();
			}
		});
	}, false);
	// 获取所有车辆类型
	var vehicleArray = Utils.getModelArrayByParentModelKey(BASIS.VEHICLE_TYPE.ROOT);
	for (var i = 0; i < vehicleArray.length; i++) {
		$('#upload_owner_frame #vehicle-type').append('<option value="'+vehicleArray[i].modelValue+'">'+vehicleArray[i].modelName+'</option>');
	}
	$('#upload_owner_frame #file-address').bind('click', function(event) {
		$('#upload_owner_frame [type="file"]').click();
	});
	$('#upload_owner_frame [type="file"]').bind('change', function(event) {
		if (this.files.length == 0) {
			$('#upload_owner_frame #file-address').html('请选择文件');
		} else {
			$('#upload_owner_frame #file-address').html(this.value);
		}
	});

	$('#upload_owner_frame #upload-file-button').bind('click', function() {
		if ($('#upload_owner_frame [type="file"]')[0].files.length == 0) {
			notification({'title':'提示', 'message':'请先选择要上传的文件'},'info');
			return;
		} else {
			$(this).hide();
			var uploadBtn = $(this);
			$('#upload_owner_frame #upload-pro').addClass('change-upload-pro');
			setTimeout(function() {
				$('#upload_owner_frame .upload-pro-ed-notify').show(250);
			},1200);
			setTimeout(function() {
				var data = new FormData($('#upload_owner_frame form')[0]);
				var xhr = new XMLHttpRequest();
				xhr.upload.onprogress = function(e){
					var pro = e.loaded / e.total;
					$('#upload_owner_frame .upload-pro-ed-notify').html(pro*100+'%');
					$('#upload_owner_frame #upload-pro-ed').css({'width':pro*100+'%'});
					if (pro == 1) {
						$('#upload_owner_frame .upload-pro-ed-notify').html('导入中..');
					}
				}
				xhr.onload = function(e){
					var res = JSON.parse(e.srcElement.responseText);
					if (res.isOk == 0) {
						notification({'title':'错误', 'message':res.result},'error');
					} else {
						notification({'title':'成功', 'message':'导入数据成功！'},'success');
						setTimeout(function() {
							$('#upload_owner_frame .upload-pro-ed-notify').html('完成');
						},500);
						$('#upload_owner_frame .upload-log-table textarea').val(JSON.parse(res.result).logRemark);
					}
					$('#upload_owner_frame .upload-pro-ed-notify').hide(250);
					$('#upload_owner_frame #upload-pro').removeClass('change-upload-pro');
					$('#upload_owner_frame #upload-pro').addClass('change-upload-pro-go');
					$('#upload_owner_frame #upload-pro-ed').css({'width':'0px'});
					setTimeout(function(){
						uploadBtn.show();
						$('#upload_organization_frame #upload-pro').css({'background':'transparent'});
					},1000)
				}
				xhr.open('post', baseApiPath + 'owner_info/upload/owner_info', true);
				xhr.send(data);
			}, 1250);
		}
	});
</script>